.mainBox {
    margin: 10px;
    padding: 10px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

.section-block {
    margin-bottom: 30px;
    padding: 25px;
    border: 1px solid #ebeef5;
    border-radius: 8px;
    background: #fff;transition: all 0.3s;box-shadow: 0 2px 12px0 rgba(0,0,0,.02);
}
.section-block:hover {
    box-shadow: 0 2px 16px 0 rgba(0,0,0,.05);
}

.section-title {
    font-size: 14px;
    font-weight: 500;
    color: #303133;
    margin-bottom: 15px;
    padding-left: 10px;
    border-left: 4px solid #409eff;
    display: flex;
    justify-content: space-between;align-items: center;
}

.section-title .subtitle {
    font-size: 13px;
    color: #909399;
    font-weight: normal;
}

.profile-box {
    display: flex;
    padding: 20px;
}

.avatar-section {
    text-align: center;
    margin-right: 40px;
}

.avatar-box {
    width: 120px;
    height: 120px;
    margin-bottom: 10px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.avatar-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.form-section {
    flex: 1;}

.layui-form-label {
    color: #606266;
    font-weight: 500;}

.layui-input {
    height: 38px;
    line-height: 38px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    transition: all 0.3s;
}

.layui-input:hover {
    border-color: #c0c4cc;
}

.layui-input:focus {
    border-color: #409eff;
    box-shadow: 0 0 0 2px rgba(64,158,255,.2);
}


.btn-upload {
    padding: 8px 16px;
    background: #f0f2f5;
    color: #333;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 14px;box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.btn-upload:hover {
    background: #e6e8eb;
    box-shadow: 0 2px 8px rgba(0,0,0,0.09);
}

 .btn-submit {
    padding: 10px 28px;
    background: linear-gradient(135deg, #409eff 0%, #3a8ee6 100%);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 2px 6px rgba(64,158,255,0.2);
}

.btn-submit:hover {
    background: linear-gradient(135deg, #66b1ff 0%, #409eff 100%);
    box-shadow: 0 4px 12px rgba(64,158,255,0.3);
    transform: translateY(-1px);
}

.btn-reset {
    padding: 10px 28px;
    background: #fff;
    color: #606266;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 14px;
    margin-left: 12px;
}

.btn-reset:hover {
    color: #409eff;
    border-color: #c6e2ff;
    background: #ecf5ff;
}

.tag-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tag-item {
    padding: 6px 15px;
    background: #f0f2f5;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.3s;
}

.tag-item:hover {
    background: #e6e8eb;
}

.tag-item.active {
    background: #e6f7ff;
    color: #1890ff;border: 1px solid #91d5ff;
}

.preference-group {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
}

.preference-item {
    padding: 10px;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;text-align: center;
}

.preference-item:hover {
    border-color: #40a9ff;
    color: #40a9ff;
}

.preference-item.active {
    background: #e6f7ff;
    border-color: #91d5ff;
    color: #1890ff;
}
.layui-form-item {
    margin-bottom: 25px;
    position: relative;
}
.required:before {
    content: "*";
    color: #f56c6c;
    margin-right: 4px;
}
 .layui-input[readonly] {
    background-color: #FAFAFA !important;
    border: 1px solid #E4E7ED !important;
    color: #606266 !important;
    cursor: default;
}

.layui-input[readonly]:hover {
    border-color: #DCDFE6 !important;
}
 /* 修改按钮样式 */
.modify-btn {
    padding: 0 15px;
    height: 38px;
    line-height: 38px;
    background: #fff;
    border: 1px solid #dcdfe6;
    color: #409eff;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
}

.modify-btn:hover {
    background: #ecf5ff;border-color: #409eff;
    
}
/* 验证码按钮样式 */
.verify-code-btn {
    width: 120px;
    height: 38px;
    line-height: 38px;
    background: #409eff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;}

.verify-code-btn:hover {
    background: #66b1ff;
}

.verify-code-btn[disabled] {
    background: #a0cfff;
    cursor: not-allowed;
}
/* 输入框组样式 */
.input-group {
    position: relative;display: flex;
    align-items: center;
}

.input-group .layui-input {
    padding-right: 100px; /* 为修改按钮预留空间 */
}

/* 修改按钮样式 */
.edit-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 100%;
    padding: 0 15px;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #409EFF;
    font-size: 13px;
    cursor: pointer;transition: all 0.3s;
    border-left: 1px solid #EBEEF5;
    background: #F5F7FA;
}

.edit-btn:hover {
    background: #ECF5FF;
    color: #66B1FF;
}
.edit-btn .layui-icon {
    font-size: 14px;
}
.input-group:hover .layui-input[readonly] {
    border-color: #C0C4CC !important;
}

.input-group:hover .edit-btn {
    background: #ECF5FF;
    color: #66B1FF;
}
#captchaImg {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    transition: all 0.3s;
}
#captchaImg:hover {
    border-color: #409eff;cursor: pointer;
}

.openid-guide {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: calc(100% - 40px); 
    padding: 20px;
}

.guide-qrcode {
    width: 200px;
    height: 200px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.guide-tips {
    text-align: center;
    color: #606266;
    font-size: 14px;
    line-height: 1.8;
}

.guide-tips p {
    margin: 5px 0;
}

.layui-layer-title {
    text-align: center;
    font-size: 16px;
    color: #303133;
    height: 50px;
    line-height: 50px;border-bottom: 1px solid #ebeef5;
}

/* 常见问题样式 */
.qa-container {
    padding: 15px;
}

.qa-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    margin-bottom: 20px;
    overflow: hidden;
}

.qa-header {
    background: #f6f8f9;
    padding: 15px 20px;
    font-size: 15px;
    font-weight: 500;
    color: #1a1a1a;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
}

.qa-header i {
    font-size: 18px;
    margin-right: 8px;
    color: #409EFF;
}

.qa-body {
    padding: 20px;
}

.qa-item {
    margin-bottom: 15px;
}

.qa-item:last-child {
    margin-bottom: 0;
}

.qa-label {
    font-weight: 500;
    color: #303133;
    margin-bottom: 8px;
    font-size: 14px;
}

.qa-desc {
    color: #606266;
    font-size: 13px;
    line-height: 1.8;
}

.qa-detail {
    background: #f8f9fa;
    padding: 10px 15px;
    border-radius: 4px;
    margin-top: 8px;
}

.highlight {
    color: #409EFF;
    margin-right: 15px;
    font-weight: 500;
}

.qa-warning {
    background: #fff7e6;
    border-left: 4px solid #ffba00;
    padding: 12px 15px;
    color: #d4a017;
    margin-bottom: 15px;
    border-radius: 4px;font-size: 13px;
    display: flex;
    align-items: center;
}

.qa-warning i {
    margin-right: 8px;
}

.qa-tags {
    margin-top: 8px;
}

.qa-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 12px;
    margin-right: 8px;
    background: #f0f2f5;
    color: #909399;
}

.qa-tag.success {
    background: #e1f3d8;
    color: #67c23a;
}

.qa-tag.warning {
    background: #fdf6ec;
    color: #e6a23c;
}
.key-container {
    padding: 20px;
}

.key-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    margin-bottom: 24px;
    overflow: hidden;
}

.key-header {
    padding: 16px 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.key-title {
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: 500;
    color: #1a1a1a;
}

.key-title i {
    font-size: 18px;
    margin-right: 8px;color: #409EFF;
}

.key-body {
    padding: 20px;
}

.key-item {
    margin-bottom: 20px;
}

.key-item:last-child {
    margin-bottom: 0;
}

.key-label {
    font-size: 13px;
    color: #909399;
    margin-bottom: 8px;
}

.key-value {
    position: relative;display: flex;
    align-items: center;
    background: #f8f9fa;
    border-radius: 6px;
    padding: 12px;
}

.value-text {
    flex: 1;
    font-family: monospace;
    color: #606266;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%; /* 确保文本不会超出屏幕宽度 */
    word-wrap: break-word; /* 允许在单词内换行 */
}


.key-textarea {
    width: 100%; /* 宽度100%，填满容器 */
    height: 150px; /* 高度调整为150px，提供更多空间 */
    padding: 10px; /* 内边距增加，提供更好的书写空间 */
    border: 1px solid #dcdfe6; /* 增加边框，提高可视性 */
    border-radius: 4px; /* 边框圆角，更加美观 */
    background: #f8f9fa; /* 浅灰色背景 */
    resize: vertical; /* 只允许垂直方向调整大小 */
    font-family: 'Courier New', Courier, monospace; /* 经典的等宽字体 */
    font-size: 14px; /* 字体大小增加，提高可读性 */
    color: #606266; /* 文本颜色 */
    margin-bottom: 16px; /* 下边距增加，与其他元素保持空间 */
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); /* 内阴影，增加层次感 */
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); /* 平滑的边框颜色变化 */
}
.key-textarea:focus {
    border-color: #409eff; /* 输入框获得焦点时的边框颜色 */
    outline: none; /* 移除焦点时的轮廓线 */
    box-shadow: 0 0 8px rgba(64, 158, 255, 0.5); /* 添加柔和的阴影效果 */
    transition: box-shadow 0.3s ease-in-out; /* 平滑的阴影变化过渡效果 */
}

.key-actions {
    display: flex;
    gap: 8px;
}

.copy-btn, .reset-btn {
    border: none;
    background: none;
    color: #909399;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.3s;
}

.copy-btn:hover, .reset-btn:hover {
    background: #ecf5ff;
    color: #409EFF;
}

.reset-btn {
    color: #f56c6c;
}

.reset-btn:hover {
    background: #fef0f0;
    color: #f56c6c;
}

.empty-state {
    padding: 40px;
    text-align: center;
    color: #909399;
}

.empty-state i {
    font-size: 48px;
    margin-bottom: 16px;
}

.empty-state p {
    font-size: 14px;
}
/* 媒体查询，针对小屏幕设备 */
@media (max-width: 768px) {
    .mainBox, .section-block {
        margin: 5px; /* 在小屏幕上进一步减少边距 */
        padding: 8px; /* 减少内边距 */
    }

    .section-title {
        font-size: 12px; /* 在小屏幕上进一步减小字体大小 */
        margin-bottom: 10px; /* 减少边距 */
        padding-left: 8px; /* 减少内边距 */
    }

    /* 调整其他元素以适应小屏幕 */
    .profile-box, .form-section {
        flex-direction: column; /* 堆叠布局 */
    }

    .avatar-section {
        margin-right: 0; /* 移除边距 */
        margin-bottom: 20px; /* 添加底部边距 */
    }

    .preference-group {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* 调整网格大小 */
    }
    .value-text {
        font-size: 12px; /* 在小屏幕上减小字体大小 */
    }
}